<template>
	<view class="h-head" :class="{'h-head-1':type==0}">
		<view class="classfly flex-between">
			<m-sliding v-model="type"  :list="typeList"></m-sliding>
			<view class="right flex-center" @click="Jump('/pages/home/classify/classify')">
				<m-icon color="#fff" size="48" type="icon-_fenlei" />
			</view>
		</view>
		<template v-if="type==0">
			<view class="swiper-box">
				<swiper class="swiper" indicator-color="#CECECE" indicator-active-color="#CECECE" :indicator-dots="true"
					:autoplay="true" :interval="4000" :duration="500">
					<swiper-item v-for="(item, idx) in 2" :key="idx" >
						<view class="swiper-item">
							<!-- <image class="banner-img" lazy-load="" src="../../../static/images/test/swiper1.png" mode="aspectFill" /> -->
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="home-cardBox">
				<!-- <template v-for="item in menulist">
					<view class="" @click="homeJump(item)">
						<image :src="item.menuPictureUrl"></image>
						<text>{{item.menuName}}</text>
					</view>
				</template> -->
				<view class="">
					<image src="@/static/images/test/icon1.png"></image>
					<text>优惠精选</text>
				</view>
				<view class="">
					<image src="@/static/images/test/icon2.png"></image>
					<text>生鲜冷藏</text>
				</view>
				<view class="">
					<image src="@/static/images/test/icon3.png"></image>
					<text>家具百货</text>
				</view>
				<view class="">
					<image src="@/static/images/test/icon4.png"></image>
					<text>个人护理</text>
				</view>
				<view class="">
					<image src="@/static/images/test/icon5.png"></image>
					<text>家具百货</text>
				</view>
				<view class="">
					<image src="@/static/images/test/icon6.png"></image>
					<text>进口食品</text>
				</view>
				<view class="">
					<image src="@/static/images/test/icon7.png"></image>
					<text>奶品水饮</text>
				</view>
				<view class="">
					<image src="@/static/images/test/icon8.png"></image>
					<text>母婴用品</text>
				</view>
				<view class="">
					<image src="@/static/images/test/icon9.png"></image>
					<text>粮油厨房</text>
				</view>
				<view @click="Jump('/pages/dialogue/dialogue?touserid='+ csaID + '&touserName=客服专员' + '&touserHeadpic=1')">
					<image src="@/static/images/test/icon10.png"></image>
					<text>客服中心</text>
				</view>
			</view>
			<m-block bgColor="unset" class="ad-card" spa="10 0 0 0">
				<image src="@/static/images/pages/home/ad-card1.png" mode="" @click="Jump('/pages/mine/share/share')"></image>
			</m-block>
		</template>
		<template v-else>
			<m-block bgColor="unset" gap="0 24" class="class-box" v-if="secondaryList.length>0">
				<m-block gap="21 30" class="class-card">
					<template v-for=" (item,idx) in secondaryList">
						<view class=""
							@click="Jump('/pages/home/goodsList/goodsList?oneId=' + item.pid + '&twoId=' + item.id + '&tName=' + this.tName)">
							<view class="image-box">
								<m-image :src="item.picurl"></m-image>
							</view>
							<text>{{item.tname}}</text>
						</view>
					</template>
					<template v-if="secondaryList.length>9">
						<view class="" @click="Jump('/pages/home/classify/classify?typeId='+tType.categoryID)">
							<view class="more-box flex-center">
								<m-icon size="60" type="home-more"></m-icon>
							</view>
						</view>
					</template>

				</m-block>
			</m-block>

		</template>
	</view>
</template>

<script>
	import Item from './item.vue'

	export default {
		data() {
			return {
				type: 0,
				bnannerList: [],
				menulist: [],
				typeList: ['精选','绿茶','红茶','白茶','乌龙茶','黄茶'],
				secondaryList:[],
				oneName: '', // 当前一级分类名称
				
				csaID: 0, // 客服专员id
			};
		},
		mounted() {
			// this.GetNewsPage();
			// this.GetHomePageMenuDataList();
			// this.GetGoodsTypePage();
			// this.GetDictionaryValue();
		},
		computed: {
			tType(){
				return this.typeList[this.type]
			},
		},
		watch: {
			type(val) {
				console.log('type==>', val)
				this.type = val;
				this.GetGoodsTypePage();
				this.$emit('onChange', val == -1 ? val : this.type)
			},
		},
		methods: {
			homeJump(item) {
				if (!item.redirectionUrl) {
					this.Toast('暂未开放')
					return
				}
				const JumpType = ['/pages/debtee/debtee'].indexOf(item.redirectionUrl) !=-1
				const mode = JumpType?3:1;
				this.Jump({
					url:item.redirectionUrl,
					mode:mode
				})
			},
			//点击banner时
			handleBanner(item) {
				let reg = new RegExp('http')
				if (item.redirectionUrl) {
					if (reg.test(item.redirectionUrl)) {
						window.open(item.redirectionUrl)
					} else {
						this.Jump(item.redirectionUrl)
					}
				}
			},
			async GetHomePageMenuDataList() {
				const { data, success } = await GetHomePageMenuDataList({
					appMenuGroup: 'AppMenuGroup1'
				})
				this.menulist = data
			},
		},


	}
</script>

<style lang="scss">
	.h-head {
		
		.classfly {
			padding: 10rpx 30rpx 40rpx;
		}
	}

	.h-head-1 {
		padding: 10rpx 24rpx 0;

		.classfly {
			padding: 0 0 20rpx;
		}
	}

	.classfly {

		.right {
			margin-left: 13rpx;
			// width: 120rpx;
			height: 48rpx;
			// background: rgba(255, 255, 255, .2);
			border-radius: 24rpx;

			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;

		}
	}

	.swiper {
		height: 212rpx;

		::v-deep.uni-swiper-wrapper {
			border-radius: 10rpx;
			overflow: hidden;
		}

		.swiper-item {
			height: 212;

			.banner-img {
				width: 100%;
				height: 212rpx;
				//border-radius: 16rpx;
			}
		}

		::v-deep {
			.uni-swiper-dot {
				width: 10rpx;
				height: 10rpx;
				background: #f6f6f6 !important;
				border-radius: 5rpx;

				&.uni-swiper-dot-active {
					width: 20rpx;
				}
			}
		}
	}

	.home-cardBox {
		margin-top: 20rpx;
		padding: 30rpx 10rpx 10rpx 10rpx;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		grid-gap: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		view {
			text-align: center;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			text {
				padding-top: 15rpx;
				display: block;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}

	.ad-card {
		margin-top: 20rpx !important;

		image {
			width: 100%;
			height: 167rpx;
		}
	}

	.class-box {
		background: #F6F6F6;
		border-radius: 15px 15px 0px 0px;
		margin-top: -20rpx !important;

		.class-card {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
			grid-gap: 11rpx;

			view {
				text-align: center;

				.image-box {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.more-box {
					width: 120rpx;
					height: 120rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}


		}
	}
	
	.direct-box{
		background: url('@/static/images/pages/home/index-topdirext.png') no-repeat;
		background-size: 100% 300rpx;
		
		.head {
			.left {
				.head-1 {
					position: relative;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					padding-right: 35rpx;
		
					&:before {
						content: "";
						display: block;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 17.5rpx;
						width: 2rpx;
						height: 25rpx;
						background: #EBEBEB;
					}
				}
		
				.head-2 {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
		
			}
		}
	}
</style>
